<!DOCTYPE html>
<html>
  <head>
    <script src="react.js"></script>
    <script src="browser.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <title id="title">发现</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  </head>
  <body id="body" class="body">
    <div id="content"></div>
    <div id="footer"></div>
    <script type="text/babel">
      
      var Footer = React.createClass({
        getInitialState: function() {
          return {
            title : '发现2'
          };
        },
        
        handleClick: function(event) {
            console.log();

          this.setState({
            title : event.target.innerHTML
          });
        },

        render: function() {
          var text = this.state.title ? this.state.title : '发现';
          document.getElementById('title').innerHTML = text;
          return (
            <ul className="footer">
              <li className="find" ref="find" onClick={this.handleClick}>发现</li>
              <li className="myCenter"  ref="myCenter" onClick={this.handleClick}>个人中心</li>
              <li className="sell" ref="sell" onClick={this.handleClick}>出售</li>
            </ul>
          );

        }
      });

      var initContent = [
        {
          id: 1,
          head_url : 'http://img13.360buyimg.com/n2/jfs/t1045/320/904793663/244236/95434fa4/555462cbNf6f6d4f7.jpg',
          desc : '老人与海中文正版原版 诺贝尔文学奖 海明威的书原著全集 初中学生小学生课外书籍'

        },
        {
          id: 2,
          head_url : 'http://img13.360buyimg.com/n2/jfs/t1045/320/904793663/244236/95434fa4/555462cbNf6f6d4f7.jpg',
          desc : '老人与海中文正版原版 诺贝尔文学奖 海明威的书原著全集 初中学生小学生课外书籍'

        },
        {
          id: 3,
          head_url : 'http://img13.360buyimg.com/n2/jfs/t1045/320/904793663/244236/95434fa4/555462cbNf6f6d4f7.jpg',
          desc : '老人与海中文正版原版 诺贝尔文学奖 海明威的书原著全集 初中学生小学生课外书籍'

        }
      ];
            

      var Content = React.createClass({
        render: function() {
          var content = initContent;
          return (
            <ul className="content">
              {
                content.map(function(item) {
                  console.log(item.head_url);
                    return (<li key={item.id} className="li-content">
                      <img src={item.head_url}/>
                      <p className="content-desc">{item.desc}</p>
                      <div className="content-b">
                        <span className="content-b-l">
                            分享
                        </span>
                        <span className="content-b-r">
                            收藏
                        </span>
                      </div>
                      
                    </li>
                  )
                })
              }
            </ul>
          );
        }
      });
      React.render(
        <Footer />,
        document.getElementById('footer')
      );

      React.render(
        <Content />,
        document.getElementById('content')
      );

    </script>
  </body>
</html>